<template>
	<!-- 20230508 -->
	<view class="mall-evaluate-list-page">
		<!-- 页面内容 -->
		<view class="page-content padding-bottom-safe-footer-20">
			<!-- 筛选 -->
			<view class="padding-top-20 padding-lr-30 flex flex-wrap bg-ff">
				<!-- 筛选项 -->
				<view class="tab-item margin-right-20 margin-bottom-20 padding-lr-20 radius-25 text-22"
					:class="{'active': index == tabIndex}" v-for="(item,index) in tabList" :key="index"
					@click="clickNav(index)">
					{{item.name}} {{item.number}}
				</view>
			</view>

			<!-- 评论 -->
			<view>
				<ty-list-list :status="loadStatus">
					<view class="margin-top-20" v-for="(item,index) in list" :key="index">
						<jc-mall-evaluate :evaluate-data="item"></jc-mall-evaluate>
					</view>
				</ty-list-list>
			</view>

			<!-- 底部操作，仅正常商城存在底部操作栏，秒杀商城不存在 -->
			<block v-if="type == 1">
				<jc-mall-buyBottomBar :is-collect="isCollect" :cart-type-number="cartTypeNumber"
					@collect="collectProduct" @cart="go('/pages/mall/cart',3)" @account="account" @buy="skuShow">
				</jc-mall-buyBottomBar>
			</block>
		</view>

		<!-- 页面浮层 -->
		<view class="page-layer">
			<!-- 规格弹出框 -->
			<ty-layer-sku :product.sync="detail" :show.sync="isSkuLayerShow" :type="skuBtnType" @confirm="confirm">
			</ty-layer-sku>

			<!-- 登录浮层 -->
			<ty-register-login :show.sync="isRegisterLayerShow" :agree.sync="isRegisterAgree">
				<!-- #ifdef APP-PLUS -->
				<view class="bg-ff">
					<!-- 占位 view，避免页面内容出现在状态栏 -->
					<view class="height-status-bar"></view>
				</view>
				<!-- #endif -->
			</ty-register-login>
		</view>
	</view>
</template>

<script>
	import mall from './api/mall.js'
	export default {
		data() {
			return {
				// 类型 1--正常商城 2--秒杀商城
				type: 1,
				// 商品ID
				productId: '',
				// 商品详情
				detail: {},
				// 是否收藏
				isCollect: false,
				// 规格浮层是否显示
				isSkuLayerShow: false,
				// SKU按钮加载样式 1--显示1个按钮 确定 2--显示2个按钮 加入购物车和立即购买
				skuBtnType: 2,
				// 购买方式 1--加入购物车 2--立即购买
				buyType: '',
				// 购物车种类数量
				cartTypeNumber: 0,

				// 加载状态
				loadStatus: '',
				// 商品评价列表
				list: [],

				// 注册浮层是否显示
				isRegisterLayerShow: false,
				// 注册浮层是否选中用户协议
				isRegisterAgree: false,

				// 选中索引
				tabIndex: 0,
				// 标签
				tabList: [{
					name: '全部',
					number: 0
				}, {
					name: '有图',
					number: 0
				}, {
					name: '好评',
					number: 0
				}, {
					name: '中评',
					number: 0
				}, {
					name: '差评',
					number: 0
				}, {
					name: '追评',
					number: 0
				}]
			}
		},

		onLoad(options) {
			this.productId = options.id || 0
			this.type = options.type || 1
		},

		onShow() {
			if (this.cn.isLogin() && this.type == 1) {
				// 判断商品是否收藏
				mall.isCollect(this.productId).then(res => {
					this.isCollect = res.data.is_collect == 1 ? true : false
				})

				// 购物车种类数量
				mall.cart.countCartTypeNumber().then(res => {
					this.cartTypeNumber = res.data.cart_type_number
				})
			}
		},

		onReady() {
			// 商品详情
			mall.getProduct(this.productId).then(res => {
				this.detail = res.data.detail
			})

			// 获取客服手机号
			mall.getLinkTel().then(res => {
				this.linkTel = res.data.link_tel
			})

			// 获取商品评价数量
			mall.evaluate.countEvaluateNumber(this.productId).then(res => {
				if (res.code == 0) {
					this.tabList[0].number = res.data.evaluate_number.all
					this.tabList[1].number = res.data.evaluate_number.image
					this.tabList[2].number = res.data.evaluate_number.good
					this.tabList[3].number = res.data.evaluate_number.middle
					this.tabList[4].number = res.data.evaluate_number.bad
					this.tabList[5].number = res.data.evaluate_number.add
				}
			})

			// 加载商品评论列表
			this.loadList(1)
		},

		onReachBottom() {
			// 加载商品评论列表
			this.loadList(0)
		},

		methods: {
			/**
			 * 点击切换标签栏
			 * @param {int} index 索引
			 * @date 2023-01-31
			 */
			clickNav(index) {
				this.tabIndex = index
				this.loadList(1)
			},

			/**
			 * 加载列表
			 * @param {int} isFirstPage 0--不是首页加载 1--首页加载
			 * @date 2023-01-31
			 */
			loadList(isFirstPage) {
				mall.evaluate.listEvaluate(this, isFirstPage, this.productId, this.tabIndex)
			},

			/**
			 * 收藏和取消收藏
			 * @date 2023-01-31
			 */
			collectProduct() {
				// 没有登录先登录
				if (!this.cn.isLogin()) {
					this.isRegisterLayerShow = true
					return false
				}
				// 已登录
				let collect_type = this.isCollect ? 0 : 1
				mall.updateCollect(this.productId, collect_type).then(res => {
					if (res.code == 0) {
						this.cn.toast(res.msg)
						this.isCollect = res.data.is_collect ? true : false
					}
				})
			},

			/**
			 * 联系客服
			 * @date 2023-01-31
			 */
			account() {
				this.cn.callPhone(this.linkTel)
			},

			/**
			 * 点击显示SKU浮层
			 * @param {Object} e
			 * @date 2023-02-01
			 */
			skuShow(e) {
				// 没有登录先登录
				if (!this.cn.isLogin()) {
					this.isRegisterLayerShow = true
					return false
				}
				// 已登录
				this.skuBtnType = (e.type == 1 || e.type == 2) ? 1 : 2
				this.isSkuLayerShow = true
				this.buyType = (e.type == 1 || e.type == 2) ? e.type : ''
			},

			/**
			 * 确认下单
			 * @date 2023-02-01
			 */
			confirm(e) {
				if (this.detail.is_spec_open == 0 && this.detail.stock <= 0) {
					this.cn.toast('库存不足啦!')
					return false
				}
				// 选中SKU名称
				this.chooseSkuName = e.sku_name
				// 购买方式
				this.buyType = (e.type == 1 || e.type == 2) ? e.type : this.buyType

				// 加入购物车
				if (this.buyType == 1) {
					// 加入或更新购物车
					mall.cart.updateCartProduct(this.productId, e.choose_sku, e.buy_number, 0).then(res => {
						if (res.code == 0) {
							this.cartTypeNumber = res.data.cart_type_number
							this.isSkuLayerShow = false
							this.cn.toast(res.msg)
						}
					})
					// 立即购买
				} else if (this.buyType == 2) {
					uni.navigateTo({
						url: '/pages/mall/order?buy_type=2&product_id=' +
							this.productId + '&sku=' +
							e.choose_sku + '&number=' + e.buy_number
					})
				}
			}
		}
	}
</script>

<style scoped>
	/* 筛选条件 */
	.tab-item {
		height: 50rpx;
		line-height: 46rpx;
		box-sizing: border-box;
		border: 2rpx solid #F5F5F5;
		background: #F5F5F5;
		color: #333;
	}

	.tab-item.active {
		border: 2rpx solid var(--main);
		background: var(--mainLight);
		color: var(--main);
	}
</style>